var pieTu = function(dom, datas) {
    var myChart = echarts.init(dom);
    datas = datas.sort(function (a, b) { return a.value - b.value; });
    datas[0]['itemStyle'] = {
        color: {
          type: 'linear',
          colorStops: [{
              offset: 0, color: '#e54853'
          }, {
              offset: 1, color: '#bf305c'
          }],
          global: false
      }
    };
    datas[1]['itemStyle'] = {
        color: {
          type: 'linear',
          colorStops: [{
              offset: 0, color: '#9d6df4'
          }, {
              offset: 1, color: '#875de5'
          }],
          global: false
      }
    };
    datas[2]['itemStyle'] = {
        color: {
          type: 'linear',
          colorStops: [{
              offset: 0, color: '#d58ff1'
          }, {
              offset: 1, color: '#b871d8'
          }],
          global: false
      }
    };
    datas[3]['itemStyle'] = {
        color: {
          type: 'linear',
          colorStops: [{
              offset: 0, color: '#39a2e6'
          }, {
              offset: 1, color: '#4fabf2'
          }],
          global: false
      }
    };
    datas[4]['itemStyle'] = {
      color: {
          type: 'linear',
          colorStops: [{
              offset: 0, color: '#5167df'
          }, {
              offset: 1, color: '#4142ce'
          }],
          global: false
      }
    };
    var  option = {
        color: ["#505ee1", "#37a3e4", "#966ef3", "#d88bfb", "#e44352"],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        
        series : [
            { 
                name:'服务器分组数量',
                type:'pie',
                radius : ['20','70%'],
                center: ['50%', '50%'],
                roseType : 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#6e6b9b'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: '#6e6b9b'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 10
                    }
                },
                data: datas,
                markLine: {
                  silent: true,
                }
              }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
};

var pieTu2 = function(dom, datas) {
  var myChart = echarts.init(dom);
  datas = datas.sort(function (a, b) { return a.value - b.value; });
  datas[0]['itemStyle'] = {
      color: {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#e54853'
        }, {
            offset: 1, color: '#bf305c'
        }],
        global: false
    }
  };
  datas[1]['itemStyle'] = {
      color: {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#9d6df4'
        }, {
            offset: 1, color: '#875de5'
        }],
        global: false
    }
  };
  datas[2]['itemStyle'] = {
      color: {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#d58ff1'
        }, {
            offset: 1, color: '#b871d8'
        }],
        global: false
    }
  };
  datas[3]['itemStyle'] = {
      color: {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#39a2e6'
        }, {
            offset: 1, color: '#4fabf2'
        }],
        global: false
    }
  };
  datas[4]['itemStyle'] = {
    color: {
        type: 'linear',
        colorStops: [{
            offset: 0, color: '#5167df'
        }, {
            offset: 1, color: '#4142ce'
        }],
        global: false
    }
  };
  var  option = {
      color: ["#505ee1", "#37a3e4", "#966ef3", "#d88bfb", "#e44352"],
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      
      series : [
          { 
              name:'TOP5报警主机',
              type:'pie',
              radius : ['40%','60%'],
              center: ['50%', '50%'],
              label: {
                  normal: {
                      textStyle: {
                          color: '#6e6b9b'
                      }
                  }
              },
              labelLine: {
                  normal: {
                      lineStyle: {
                          color: '#6e6b9b'
                      },
                      smooth: 0.2,
                      length: 10,
                      length2: 10
                  }
              },
              data: datas,
              markLine: {
                silent: true,
              }
            }
      ]
  };

  if (option && typeof option === "object") {
      myChart.setOption(option, true);
  }
};

var pDataInit = function(data){
    var datas = [],
        item = {};
    for(var i=0, len=data.length;i<len;i++) {
        item = {};
        item['value'] = parseInt(data[i]['nums']);
        item['name'] = data[i]['name'];
        datas.push(item)
    }
    return datas;
}

var pDataInit2 = function(data){
  var datas = [],
      item = {};
  for(var k in data) {
      item = {};
      item['value'] = data[k];
      item['name'] = k;
      datas.push(item)
  }
  return datas;
}

var peiTuInit = function(dom, key) {
    $.ajax({
        url: getRequstURL(key),
        type: 'GET',
        success: function(res){
            if(res && res.length > 0) {
                pieTu(dom, pDataInit(res))
            }
        },
        error: function(error){},
    });
}

var peiTuInit2 = function(dom, key) {
  $.ajax({
      url: getRequstURL(key),
      type: 'GET',
      success: function(res){
          if(res) {
              pieTu2(dom, pDataInit2(res))
          }
      },
      error: function(error){},
  });
}


